<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header"><span>转单情况</span></div>
      <el-row>
        <el-col :span="12">
          <el-form label-width="140px">
            <el-form-item label="转单人姓名：" prop="title">{{ info['admin_name'] }}</el-form-item>
            <el-form-item label="转单时间：">{{ info['apply_time'] }}</el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-width="140px">
            <el-form-item label="转单人手机：">{{ info['admin_mobile'] }}</el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-form ref="transferForm" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="转单备注：">{{ info['change_remarks'] }}</el-form-item>
        <el-form-item label="转单状态：" prop="title">
          <el-tag v-if="info['change_status']===1" type="danger">待处理</el-tag>
          <el-tag v-else-if="info['change_status']===2" type="warning">已驳回</el-tag>
          <el-tag v-else type="success">已处理</el-tag>
        </el-form-item>
        <el-form-item v-if="info['work_order_status']!==3" label="接单网格员：">
          <el-select v-model="form.admin_id" class="select" filterable clearable>
            <el-option-group
              v-for="group in adminList"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group['personnel']"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item v-if="info['change_status']===1&&info['work_order_status']!==3" label="驳回原因：">
          <el-input v-model="form['reason']" type="textarea" rows="4" placeholder="审核驳回则需要填写驳回原因, 审核通过则不需要填写..."/>
        </el-form-item>
        <el-form-item v-if="info['change_status']===1&&info['work_order_status']!==3">
          <el-button type="danger" @click="submitTransfer(0)">驳回</el-button>
          <el-button type="success" class="bg-green" @click="submitTransfer(1)">审核通过</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-1" style="margin-top: 20px;">
      <div slot="header">
        <span>工单详情</span>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form label-width="140px">
            <el-form-item label="提交时间：">{{ info['created_at'] }}</el-form-item>
            <el-form-item label="提交人姓名：">{{ info['member_name'] }}</el-form-item>
            <el-form-item label="提交人手机：">{{ info['member_mobile'] }}</el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-width="140px">
            <el-form-item label="工单状态：">
              <el-tag v-if="info['work_order_status']===1" type="danger">未处理</el-tag>
              <el-tag v-else-if="info['work_order_status']===2" type="warning">处理中</el-tag>
              <el-tag v-else type="success">已解决</el-tag>
            </el-form-item>
            <el-form-item label="所属街道：">{{ (info['street_father_name']||'')+(info['street_son_name']||'') }}</el-form-item>
            <el-form-item label="详细地址：">{{ info['address'] }}</el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-form label-width="140px">
        <el-form-item label="反馈信息：">{{ info['description'] }}</el-form-item>
        <el-form-item>
          <ws-upload-multiple-img :disable="true" :path="info['pic_list_url']"/>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card v-if="info.status!==0" class="box-1" style="margin-top: 20px;">
      <div slot="header"><span>处理情况</span></div>
      <el-row>
        <el-col :span="12">
          <el-form label-width="140px">
            <el-form-item label="处理人姓名：" prop="title">{{ info['admin_name'] }}</el-form-item>
            <!--<el-form-item label="处理时间：">{{ info['end_time'] }}</el-form-item>-->
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-width="140px">
            <el-form-item label="处理人手机：">{{ info['admin_mobile'] }}</el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!--<el-form label-width="140px">
        <el-form-item label="处理信息：">{{ info['remarks'] }}</el-form-item>
        <el-form-item>
          <ws-upload-multiple-img :disable="true" :path="info['annex_url']"/>
        </el-form-item>
      </el-form>-->
      <el-form v-for="item in info['work_order_log']" :key="item.id" label-width="140px">
        <el-divider/>
        <el-form-item :label="item['type_txt']+'：'">{{ item['name'] + ' ( '+ item['created_at'] + ' ) ' }}</el-form-item>
        <el-form-item label="内容">{{ item['remarks'] }}</el-form-item>
        <el-form-item>
          <ws-upload-multiple-img v-if="item['annex'] && item['annex'].length>0" :disable="true" :path="item['annex']"/>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ImageUrl: '',
        id: '',
        // 服务人员列表
        adminList: [],
        info: {},
        form: {
          admin_id: '',
          reason: ''
        },
        rules: {
          admin_id: [{ required: true, message: '请选择接单网格员', trigger: 'change' }]
        }
      }
    },
    watch: {},
    created() {
      this.id = this.$route.query.id;
      this.getData();
      this.getUsersList();
    },
    methods: {
      getData() {
        const url = 'workorder/changeOrderInfo/' + this.id;
        this.$store.dispatch('GetConnect', { url }).then(res => {
          this.info = res.data;
          // 图片列表
          this.info.pic_list_url = [];
          for (const i in this.info.pic_list) {
            this.info.pic_list_url.push({ id: this.info.pic_list[i], url: this.ImageUrl + this.info.pic_list[i] })
          }
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      },

      /**
       *  获取系统用户列表
       *  接口:'user/all-list'
       */
      getUsersList() {
        const url = 'workorder/changeOrderAdminList'
        this.$store.dispatch('GetConnect', { url }).then(res => {
          this.adminList = res.data;
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },

      /**
       *  执行操作
       *  接口:'user/all-list'
       */
      submitTransfer(status) {
        this.$refs['transferForm'].validate((valid) => { // 表单验证
          if (valid) {
            const url = 'workorder/changeOrderVerify';
            const data = {
              id: this.id,
              admin_id: this.form.admin_id,
              reason: this.form.reason,
              status: status
            };
            this.$store.dispatch('GetConnect', { url, data }).then(res => {
              this.$message.success(res.msg);
              this.$router.back();
            }).catch(e => {
              this.$message.error(e.msg + ',请刷新或联系管理员!');
            })
          } else {
            this.$message.error('提交失败,请检查必填项');
          }
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';
  .box-1 {
    max-width: 1000px;
    margin: 0 auto;
  }
</style>
